<template>
  <div>
    <Header :car="car" :changeCar="changeCar" />
    <hr />
    <List :car="car" />
  </div>
</template>

<script>
import Header from "@/components/Header";
import List from "@/components/List";
export default {
  name: "App",
  components: {
    Header,
    List,
  },
  data() {
    return {
      car: "青桔单车",
    };
  },
  methods: {
    changeCar() {
      this.car = "摩拜单车";
    },
  },

  beforeCreate() {
    console.log("!!!!!beforeCreate!!!!!");
  },
  created() {
    console.log("!!!!!created!!!!!");
  },
  beforeMount() {
    console.log("!!!!!beforeMount!!!!!");
  },
  mounted() {
    console.log("!!!!!mounted!!!!!");
  },
  beforeUpdate() {
    console.log("!!!!!beforeUpdate!!!!!");
  },

  updated() {
    console.log("!!!!!updated!!!!!");
  },

  beforeDestroy() {
    console.log("!!!!!beforeDestroy!!!!!");
  },
  destroyed() {
    console.log("!!!!!destroyed!!!!!");
  },
};
</script>

<style>
</style>